<!-- Site Setting Panel -->
  <section id="settings" data-ng-include=" 'views/settings/settings.html' " style="display:none"></section>
<!-- Site Setting Panel End -->

<!-- Page Header Start -->
<div class="pageheader">
  <h2><i class="fa fa-envelope"></i> ngTable </h2>
  <div class="breadcrumb-wrapper hidden-xs"> <span class="label">You are here:</span>
    <ol class="breadcrumb">
      <li> <a href="index.html"> Home </a> </li>
      <li class="active"> ngTable </li>
    </ol>
  </div>
</div>
<!-- Page Header End -->

<div class="page">

  <div class="row">
    <div class="col-lg-6" ng-controller="inlineeditCtrl">
      <section class="panel panel-default">
        <div class="panel-heading"> 
          <h3 class="panel-title"> Table With Pagination </h3> 
          <span class="pull-right panel-toolbar"> 
            <i class="fa fa-chevron-down mr-10" data-panel-Toggle=""></i> 
            <i class="fa fa-expand mr-10" data-fullscreen-widget=""></i> 
            <i class="fa fa-times" data-widget-close=""></i> 
          </span> 
        </div>
        <div class="panel-body">
          <table ng-table="tableParams" class="table">
          <tbody ng-repeat="p in $data">
            <tr id="tr{{p.id}}" ng-class-odd="'odd'" ng-class-even="'even'">
              <td data-title="'Order'" sortable="'id'">{{p.id}}</td>
              <td data-title="'Customer'" sortable="'fn'">{{p.fn}}</td>
              <td data-title="'Base Price'" sortable="'em'">{{p.em}}</td>
              <td data-title="'Status'" sortable="'ac'">{{p.ac}}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </section>
    </div>
    <div class="col-lg-6" ng-controller="inlineeditCtrl">
      <section class="panel panel-default">
        <div class="panel-heading"> 
          <h3 class="panel-title"> Pagination Template </h3> 
          <span class="pull-right panel-toolbar"> 
            <i class="fa fa-chevron-down mr-10" data-panel-Toggle=""></i> 
            <i class="fa fa-expand mr-10" data-fullscreen-widget=""></i> 
            <i class="fa fa-times" data-widget-close=""></i> 
          </span> 
        </div>
        <div class="panel-body">
          <table ng-table="tableParams" template-pagination="custom/pager" class="table">
          <tbody ng-repeat="p in $data">
            <tr id="tr{{p.id}}" ng-class-odd="'odd'" ng-class-even="'even'">
              <td data-title="'Order'" sortable="'id'">{{p.id}}</td>
              <td data-title="'Customer'" sortable="'fn'">{{p.fn}}</td>
              <td data-title="'Base Price'" sortable="'em'">{{p.em}}</td>
              <td data-title="'Status'" sortable="'ac'">{{p.ac}}</td>
            </tr>
            </tbody>
          </table>
          <script type="text/ng-template" id="custom/pager">
        <ul class="pager ng-cloak">
          <li ng-repeat="page in pages"
                ng-class="{'disabled': !page.active, 'previous': page.type == 'prev', 'next': page.type == 'next'}"
                ng-show="page.type == 'prev' || page.type == 'next'" ng-switch="page.type">
            <a ng-switch-when="prev" ng-click="params.page(page.number)" href="">&laquo; Previous</a>
            <a ng-switch-when="next" ng-click="params.page(page.number)" href="">Next &raquo;</a>
          </li>
            <li> 
            <div class="btn-group">
                <button type="button" ng-class="{'active':params.count() == 10}" ng-click="params.count(10)" class="btn btn-default">10</button>
                <button type="button" ng-class="{'active':params.count() == 25}" ng-click="params.count(25)" class="btn btn-default">25</button>
                <button type="button" ng-class="{'active':params.count() == 50}" ng-click="params.count(50)" class="btn btn-default">50</button>
                <button type="button" ng-class="{'active':params.count() == 100}" ng-click="params.count(100)" class="btn btn-default">100</button>
            </div>
            </li>
        </ul>
    </script> 
        </div>
      </section>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-6" ng-controller="inlineeditCtrl">
      <section class="panel panel-default">
        <div class="panel-heading"> 
          <h3 class="panel-title"> Table With Sorting </h3> 
          <span class="pull-right panel-toolbar"> 
            <i class="fa fa-chevron-down mr-10" data-panel-Toggle=""></i> 
            <i class="fa fa-expand mr-10" data-fullscreen-widget=""></i> 
            <i class="fa fa-times" data-widget-close=""></i> 
          </span> 
        </div>
        <div class="panel-body">
          <button ng-click="tableParams.sorting({})" class="btn btn-default pull-right">Clear sorting</button>
          <p><strong>Sorting:</strong> {{tableParams.sorting()|json}}
          <table ng-table="tableParams" class="table">
          <tbody ng-repeat="p in $data">
            <tr id="tr{{p.id}}" ng-class-odd="'odd'" ng-class-even="'even'">
              <td data-title="'Order'" sortable="'id'">{{p.id}}</td>
              <td data-title="'Customer'" sortable="'fn'">{{p.fn}}</td>
              <td data-title="'Base Price'" sortable="'em'">{{p.em}}</td>
              <td data-title="'Status'" sortable="'ac'">{{p.ac}}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </section>
    </div>
    <div class="col-lg-6" ng-controller="ngTableCtrl">
      <section class="panel panel-default">
        <div class="panel-heading"> 
          <h3 class="panel-title"> Table With Filters </h3> 
          <span class="pull-right panel-toolbar"> 
            <i class="fa fa-chevron-down mr-10" data-panel-Toggle=""></i> 
            <i class="fa fa-expand mr-10" data-fullscreen-widget=""></i> 
            <i class="fa fa-times" data-widget-close=""></i> 
          </span> 
        </div>
        <div class="panel-body">
          <p><strong>Filter:</strong> {{tableParams.filter()|json}}
        <table ng-table="tableParams" show-filter="true" class="table">
            <tr ng-repeat="user in $data">
                <td data-title="'Name'" sortable="'name'" filter="{ 'name': 'text' }">
                    {{user.name}}
                </td>
                <td data-title="'Age'" sortable="'age'" filter="{ 'age': 'text' }">
                    {{user.age}}
                </td>
            </tr>
        </table>
        </div>
      </section>
    </div>
  </div>
<div class="row">
   <div class="col-lg-12" ng-controller="inlineeditCtrl">
      <section class="panel panel-default">
        <div class="panel-heading"> 
          <h3 class="panel-title"> Editable Table </h3> 
          <span class="pull-right panel-toolbar"> 
            <i class="fa fa-chevron-down mr-10" data-panel-Toggle=""></i> 
            <i class="fa fa-expand mr-10" data-fullscreen-widget=""></i> 
            <i class="fa fa-times" data-widget-close=""></i> 
          </span> 
        </div>
        <div class="panel-body">
          <table ng-table="tableParams" class="table">
          <tbody ng-repeat="p in $data">
            <tr id="tr{{p.id}}" ng-class-odd="'odd'" ng-class-even="'even'">
              <td data-title="'ID'" sortable="'id'"><span ng-if="!p.$edit">{{p.id}}</span>
                <div ng-if="p.$edit">
                  <input class="form-control" type="text" ng-model="p.id" />
                </div></td>
              <td data-title="'Customer'" sortable="'fn'"><span ng-if="!p.$edit">{{p.fn}}</span>
                <div ng-if="p.$edit">
                  <input class="form-control" type="text" ng-model="p.fn" />
                </div></td>
              <td data-title="'Purchased On'" sortable="'dc'"><span ng-if="!p.$edit">{{p.dc}}</span>
                <div ng-if="p.$edit">
                  <input class="form-control" type="text" ng-model="p.dc" />
                </div></td>
              <td data-title="'Purchased Price'" sortable="'ph'"><span ng-if="!p.$edit">{{p.ph}}</span>
                <div ng-if="p.$edit">
                  <input class="form-control" type="text" ng-model="p.ph" />
                </div></td>
              <td data-title="'Status'" sortable="'ac'"><span ng-if="!p.$edit">{{p.ac}}</span>
                <div ng-if="p.$edit">
                  <input class="form-control" type="text" ng-model="p.ac" />
                </div></td>
              <td data-title="'Actions'"><a ng-if="!p.$edit" href="" class="btn btn-warning btn-sm" ng-click="p.$edit = true">Edit</a> <a ng-if="p.$edit" href="" class="btn btn-danger btn-sm" ng-click="p.$edit = false">Save</a></td>
            </tr>
            </tbody>
          </table>
        </div>
      </section>
    </div> 
</div>
  <div class="row">
    <div class="col-lg-12" ng-controller="inlineeditCtrl">
      <section class="panel panel-default">
        <div class="panel-heading"> 
          <h3 class="panel-title"> Editable Table </h3> 
          <span class="pull-right panel-toolbar"> 
            <i class="fa fa-chevron-down mr-10" data-panel-Toggle=""></i> 
            <i class="fa fa-expand mr-10" data-fullscreen-widget=""></i> 
            <i class="fa fa-times" data-widget-close=""></i> 
          </span> 
        </div>
        <div class="panel-body">
          <table ng-table="tableParams" class="table table-striped">
            <tbody ng-repeat="p in $data">
              <tr id="tr{{p.id}}" ng-class-odd="'odd'" ng-class-even="'even'">
                <td data-title="'ID'" sortable="'id'">{{p.id}}</td>
                <td data-title="'Firstname'" sortable="'fn'">{{p.fn}}</td>
                <td data-title="'Purchased On'" sortable="'dc'">{{p.dc}}</td>
                <td data-title="'Purchased Price'" sortable="'ph'">{{p.ph}}</td>
                <td ><input class="btn btn-warning btn-sm" type=button id="editRowBtn{{p.id}}" value="edit"
                                      ng-click="setEditId(p.id)"></td>
              </tr>
              <tr ng-show="editId===p.id" ng-if="editId===p.id">
                 <td>{{p.id}} <input type="hidden" name="id" value="{{p.id}}"></td>
                 <td><input type="text" name="fn" class="form-control" value="{{p.fn}}"></td>
                 <td><input type="text" name="dc" class="form-control" value="{{p.dc}}"></td>
                 <td><input type="text" name="ph" class="form-control" value="{{p.ph}}"></td>
                 <td width="100"><div class="btn-group">
                     <button type="button" class="btn btn-danger" onclick="alert('Save :)')"><i class="fa fa-floppy-o"></i></button>
                     <button type="button" class="btn btn-danger" ng-click="setEditId(-1)"><i class="fa fa-trash-o"></i></button>
                  </div>
              </tr>
            </tbody>
          </table>
        </div>
      </section>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12" ng-controller="ngTableCtrl">
      <section class="panel panel-default">
        <div class="panel-heading"> 
          <h3 class="panel-title"> Editable Table </h3> 
          <span class="pull-right panel-toolbar"> 
            <i class="fa fa-chevron-down mr-10" data-panel-Toggle=""></i> 
            <i class="fa fa-expand mr-10" data-fullscreen-widget=""></i> 
            <i class="fa fa-times" data-widget-close=""></i> 
          </span> 
        </div>
        <div class="panel-body">
        <button ng-click="tableParams.sorting({})" class="btn btn-default pull-right">Clear sorting</button>
        <button ng-click="tableParams.filter({})" class="btn btn-default pull-right">Clear filter</button>
        <p><strong>Sorting:</strong> {{tableParams.sorting()|json}}
        <p><strong>Filter:</strong> {{tableParams.filter()|json}}
    
        <table ng-table="tableParams" show-filter="true" class="table">
            <tr ng-repeat="user in $data">
                <td data-title="'Name'" sortable="'name'" filter="{ 'name': 'text' }">
                    {{user.name}}
                </td>
                <td data-title="'Age'" sortable="'age'" filter="{ 'age': 'text' }">
                    {{user.age}}
                </td>
            </tr>
        </table>
        </div>
      </section>
    </div>
  </div>
</div>
